<template>
  <div class="page">
    <div class="file">
      <div class="header-bar">
        <div class="header">
          <div class="title">文件</div>
          <div class="image">
            <div class="icon" @click="show = true">
              <van-icon name="plus" size="24" />
            </div>
          </div>
        </div>
      </div>
      <div class="my-search">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </div>
      <div class="my-menu">
        <van-grid :column-num="5" :border="false">
          <van-grid-item icon="underway-o" text="最近浏览" @click="showFileList()" />
          <van-grid-item icon="orders-o" text="本机文件" />
          <van-grid-item icon="cashier-o" text="传到电脑" />
          <van-grid-item icon="ecard-pay" text="腾讯文档" />
          <van-grid-item icon="fire-o" text="微云文件" />
        </van-grid>
      </div>
      <div class="my-file-type">
        <div class="file-type">
          <div class="file-content">
            <div class="image">
              <van-image
                width="100%"
                height="100%"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
              />
            </div>
            <div class="image">
              <van-image
                width="100%"
                height="100%"
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593549062482&di=00e93c75234b58f6882cdb5b5f4ed97b&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg"
              />
            </div>
            <div class="image">
              <van-image
                width="100%"
                height="100%"
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593549062482&di=e89e1411557752b1bcb2e2fa087ba221&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg"
              />
            </div>
          </div>
          <div class="file-type-name">未分类的文件</div>
          <div class="file-type-count">3项</div>
        </div>
        <div class="file-type">
          <div class="file-content new-file">
            <van-icon name="plus" size="40" />
            <p>新建文件夹</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            value:""
        }
    },
    mounted(){
      this.$store.commit("showTabBar");
    },
    methods:{
      showFileList(){
        this.$router.push("/fileList")
      }
    }
};
</script>

<style lang="less" scoped>
.file {
  .header-bar {
    position: fixed;
    height: 40px;
    width: 100%;
    padding: 10px;
    background: #f7f8fa;
    z-index: 2;
    .header {
      z-index: 3;
      display: flex;
      justify-content: space-between;
      width: 100%;
      .title {
        font-size: 23px;
        font-weight: 600;
      }
      .image {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon {
          padding-right: 20px;
          margin-top: 2px;
        }
      }
    }
  }
  .my-search {
    padding: 60px 10px 10px 10px;
    .van-search {
      padding: 0px;
      .van-search__content {
        background-color: #ffffff;
      }
      .van-cell {
        line-height: 30px;
      }
    }
  }
  .my-menu {
    border-bottom: 1px solid #f2f3f5;
  }
  .my-file-type {
    display: flex;
    justify-content: space-between;
    height: 150px;
    padding: 20px 10px;
    background: #ffffff;
    .file-type {
      width: 45%;
      .file-content {
        height: 100%;
        background: #f5f5f5;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        padding: 5px;
        .image {
          width: 49%;
          height: 48%;
          background: green;
        }
      }
      .file-type-name {
        font-size: 15px;
        font-weight: 550;
      }
      .file-type-count {
        font-size: 13px;
      }
      .new-file {
        display: flex;
        flex-direction: column;
        justify-content: center;
        p {
          font-size: 14px;
          color: #969799;
        }
      }
    }
  }
}
</style>
